<template>
  <div class="task-hall">
    <!-- 英雄区域 -->
    <section class="hero">
      <a-row justify="center">
        <a-col :xs="24" :lg="20">
          <h1>任务大厅</h1>
          <p>探索各种精彩任务，选择适合你的冒险挑战，与同伴一起完成并获得丰厚奖励</p>
        </a-col>
      </a-row>
    </section>

    <!-- 任务筛选 -->
    <a-card class="task-filter" :bordered="true">
      <div class="filter-header">
        <h2 class="filter-title">任务筛选</h2>
        <div class="filter-actions">
          <a-button class="btn-secondary">
            <template #icon>
              <i class="fas fa-sync-alt"></i>
            </template>
            重置筛选
          </a-button>
          <a-button type="primary">
            <template #icon>
              <i class="fas fa-search"></i>
            </template>
            搜索任务
          </a-button>
        </div>
      </div>

      <a-row :gutter="20" class="filter-grid">
        <a-col :xs="24" :sm="12" :md="6" v-for="filter in filters" :key="filter.key">
          <div class="filter-group">
            <label class="filter-label">{{ filter.label }}</label>
            <a-select
                v-model:value="filter.value"
                class="filter-select"
                :options="filter.options"
                :dropdownStyle="dropdownStyle"
            />
          </div>
        </a-col>
      </a-row>
    </a-card>

    <!-- 任务列表 -->
    <div class="section-header">
      <h2>最新任务</h2>
      <p>发现最新发布的冒险任务，抢占先机</p>
    </div>

    <a-row :gutter="[25, 25]">
      <a-col :xs="24" :md="12" :lg="8" v-for="task in tasks" :key="task.id">
        <a-card class="task-item" :bordered="true">
          <div class="task-item-header">
            <h3 class="task-item-title">{{ task.title }}</h3>
            <a-tag class="task-item-badge" :color="getBadgeColor(task.type)">
              {{ task.type }}
            </a-tag>
          </div>
          <p class="task-item-desc">{{ task.description }}</p>
          <div class="task-item-footer">
            <div class="task-item-meta">
              <div class="task-item-meta-item">
                <i class="fas fa-coins"></i>
                <span>{{ task.reward }}积分</span>
              </div>
              <div class="task-item-meta-item">
                <i class="fas fa-user-friends"></i>
                <span>{{ task.members }}</span>
              </div>
            </div>
            <a-button class="btn-secondary">查看详情</a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'TaskHall',
  setup() {
    const filters = ref([
      {
        key: 'type',
        label: '任务类型',
        value: '全部类型',
        options: [
          { value: '全部类型', label: '全部类型' },
          { value: '公会任务', label: '公会任务' },
          { value: '团队任务', label: '团队任务' },
          { value: '个人任务', label: '个人任务' },
          { value: '限时任务', label: '限时任务' }
        ]
      },
      {
        key: 'difficulty',
        label: '任务难度',
        value: '全部难度',
        options: [
          { value: '全部难度', label: '全部难度' },
          { value: '简单', label: '简单' },
          { value: '中等', label: '中等' },
          { value: '困难', label: '困难' },
          { value: '专家', label: '专家' }
        ]
      },
      {
        key: 'reward',
        label: '奖励类型',
        value: '全部奖励',
        options: [
          { value: '全部奖励', label: '全部奖励' },
          { value: '积分奖励', label: '积分奖励' },
          { value: '现金奖励', label: '现金奖励' },
          { value: '实物奖励', label: '实物奖励' }
        ]
      },
      {
        key: 'time',
        label: '时间范围',
        value: '全部时间',
        options: [
          { value: '全部时间', label: '全部时间' },
          { value: '今日任务', label: '今日任务' },
          { value: '本周任务', label: '本周任务' },
          { value: '本月任务', label: '本月任务' }
        ]
      }
    ])

    const tasks = ref([
      {
        id: 1,
        title: '校园历史研究项目',
        type: '公会任务',
        description: '协助历史系教授完成校园历史研究项目，需要收集整理历史资料和照片。',
        reward: 450,
        members: '2-4人'
      },
      {
        id: 2,
        title: '迎新活动策划',
        type: '团队任务',
        description: '策划并执行新生迎新活动，需要创意和团队协作能力，有活动经验者优先。',
        reward: 600,
        members: '5-8人'
      },
      {
        id: 3,
        title: '校园APP界面优化',
        type: '限时任务',
        description: '为校园生活APP设计并实现新的用户界面，需要UI/UX设计能力和前端开发技能。',
        reward: 800,
        members: '3-5人'
      },
      {
        id: 4,
        title: '外语角活动主持',
        type: '个人任务',
        description: '主持每周五晚的外语角活动，要求流利的英语口语能力和组织能力。',
        reward: 300,
        members: '1人'
      }
    ])

    const getBadgeColor = (type) => {
      const colorMap = {
        '公会任务': 'blue',
        '团队任务': 'green',
        '个人任务': 'orange',
        '限时任务': 'red'
      }
      return colorMap[type] || 'default'
    }

    // 下拉菜单样式配置
    const dropdownStyle = {
      minWidth: '300px',
      maxWidth: '400px'
    }

    return {
      filters,
      tasks,
      getBadgeColor,
      dropdownStyle
    }
  }
})
</script>

<style scoped>
.task-hall {
  padding-bottom: 50px;
}

.hero {
  padding: 80px 0 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1.1;
  margin-bottom: 25px;
  background: linear-gradient(to right, #ffffff, #d4d4d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: 1.3rem;
  max-width: 700px;
  margin-bottom: 40px;
  color: #a1a8b8;
  line-height: 1.6;
}

.task-filter {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 40px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.task-filter :deep(.ant-card-body) {
  padding: 0;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.8rem;
  color: white;
}

.filter-actions {
  display: flex;
  gap: 15px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  color: #a1a8b8;
}

.filter-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0f4f8;
  width: 150px;
}

.filter-select :deep(.ant-select-selector) {
  background: transparent !important;
  border: none !important;
  color: #f0f4f8 !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  min-width: 100% !important;
}

.filter-select :deep(.ant-select-selection-item) {
  display: flex !important;
  align-items: center !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.filter-select :deep(.ant-select-arrow) {
  color: #a1a8b8 !important;
  font-size: 16px !important;
}

.filter-select :deep(.ant-select-selector:hover) {
  border-color: rgba(212, 175, 55, 0.5) !important;
}

.filter-select :deep(.ant-select-focused .ant-select-selector) {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
}

/* 重点修复：下拉菜单样式优化 */
.filter-select :deep(.ant-select-dropdown) {
  border-radius: 8px !important;
  background: rgba(26, 42, 77, 0.95) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  min-width: 300px !important; /* 确保下拉菜单有足够宽度 */
  max-width: 400px !important; /* 限制最大宽度 */
}

.filter-select :deep(.ant-select-item) {
  font-size: 15px !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  color: #f0f4f8 !important;
  border-radius: 6px !important;
  margin: 4px 8px !important;
  width: auto !important; /* 改为自动宽度 */
  min-width: calc(100% - 16px) !important; /* 确保选项占满容器 */
  transition: all 0.2s ease !important;
  white-space: normal !important; /* 允许文字换行 */
  word-wrap: break-word !important; /* 允许长单词换行 */
  line-height: 1.4 !important; /* 增加行高提高可读性 */
}

/* 确保选项内容完全显示 */
.filter-select :deep(.ant-select-item-option-content) {
  white-space: normal !important;
  word-wrap: break-word !important;
  line-height: 1.4 !important;
  width: 100% !important;
}

.filter-select :deep(.ant-select-item-option-active) {
  background: rgba(212, 175, 55, 0.15) !important;
}

.filter-select :deep(.ant-select-item-option-selected) {
  background: rgba(212, 175, 55, 0.25) !important;
  color: #d4af37 !important;
  font-weight: 600;
}

.filter-select :deep(.ant-select-item:hover) {
  background: rgba(212, 175, 55, 0.2) !important;
}

/* 确保选择框中的文字也能完整显示 */
.filter-select :deep(.ant-select-selection-item) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100% - 30px) !important; /* 为箭头图标留出空间 */
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h2 {
  font-family: 'Noto Serif SC', serif;
  font-size: 2.2rem;
  margin-bottom: 15px;
  background: linear-gradient(to right, #ffffff, #d4d4d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-header p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  color: #a1a8b8;
  line-height: 1.6;
}

.task-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  height: 100%;
}

.task-item:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.3);
}

.task-item :deep(.ant-card-body) {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

.task-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-item-title {
  font-size: 1.3rem;
  color: white;
  font-weight: 600;
  margin: 0;
}

.task-item-badge {
  border: none;
  font-weight: 500;
}

.task-item-desc {
  color: #a1a8b8;
  line-height: 1.6;
  font-size: 14px;
  flex: 1;
  margin: 0;
}

.task-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.task-item-meta {
  display: flex;
  gap: 15px;
}

.task-item-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #a1a8b8;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0f4f8;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(212, 175, 55, 0.5);
}

@media (max-width: 768px) {
  .filter-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .filter-actions {
    width: 100%;
  }

  .filter-actions .ant-btn {
    flex: 1;
  }

  /* 移动端下拉菜单优化 */
  .filter-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .filter-select :deep(.ant-select-dropdown) {
    min-width: calc(100vw - 40px) !important; /* 移动端使用视口宽度 */
    max-width: calc(100vw - 40px) !important;
    left: 20px !important; /* 居中显示 */
    right: 20px !important;
  }

  .filter-select :deep(.ant-select-selector) {
    height: 44px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .task-filter {
    padding: 20px;
  }

  .filter-title {
    font-size: 1.5rem;
  }

  .hero h1 {
    font-size: 2.5rem;
  }
}
</style>